<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考研数据可视化</title>
    <style>
        .chart-container {
            width: 100%;
            height: 400px;
        }

        .card-shadow {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /* 其他基础样式保持不变 */
    </style>
</head>
<body>
<!-- 筛选栏和图表容器 HTML 结构保持不变 -->
<div class="container mx-auto px-4 mb-8">
    <!-- 筛选下拉框 -->
    <div class="flex space-x-4">
        <select id="yearRange" class="p-2 border rounded">
            <option value="2018-2023">2018-2023</option>
            <option value="2020-2023">2020-2023</option>
        </select>
        <select id="subjectCategory" class="p-2 border rounded">
            <option value="all">全部学科</option>
            <option value="engineering">工学</option>
        </select>
        <select id="dataType" class="p-2 border rounded">
            <option value="all">全部类型</option>
            <option value="adjustment">调剂数据</option>
        </select>
    </div>
</div>

<section id="charts" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">考研数据可视化图表</h2>

        <!-- 第一行至第五行图表的 HTML 结构完整保留 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 1. 学校调剂数量柱状图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">学校调剂数量柱状图</h3>
                <div class="chart-container" id="schoolAdjustmentChart"></div>
            </div>
            <!-- 2. 调剂时间分布折线图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">调剂时间分布折线图</h3>
                <div class="chart-container" id="adjustmentTimeChart"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 3. 不同年份考研人数饼图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">不同年份考研人数饼图</h3>
                <div class="chart-container" id="yearlyApplicantChart"></div>
            </div>
            <!-- 4. 各学科总分箱线图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">各学科总分箱线图</h3>
                <div class="chart-container" id="subjectScoreChart"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 5. 调剂学校与分数线关联散点图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">调剂学校与分数线关联散点图</h3>
                <div class="chart-container" id="adjustmentScoreChart"></div>
            </div>
            <!-- 6. 趋势对比图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">调剂数量与分数线趋势对比图</h3>
                <div class="chart-container" id="trendComparisonChart"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 7. 每月调剂信息发布频率热力图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">每月调剂信息发布频率热力图</h3>
                <div class="chart-container" id="monthlyHeatmapChart"></div>
            </div>
            <!-- 8. 各学科各科目分数小提琴图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">各学科各科目分数小提琴图</h3>
                <div class="chart-container" id="violinChart"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 9. 热门学校分数线分布雷达图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">热门学校分数线分布雷达图</h3>
                <div class="chart-container" id="radarChart"></div>
            </div>
            <!-- 10. 综合柱状图 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-xl font-semibold">学校调剂与分数线综合柱状图</h3>
                <div class="chart-container" id="compositeBarChart"></div>
            </div>
        </div>
    </div>
</section>

<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<!-- 完整图表初始化脚本（所有图表动态数据绑定） -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // 解析所有图表数据（从 Model 中获取 JSON 字符串）
        const schoolData = JSON.parse('${schoolAdjustmentCountsJson}');
        const timeData = JSON.parse('${adjustmentTimeDistributionJson}');
        const yearlyData = JSON.parse('${yearlyExamineeCountsJson}');
        const subjectData = JSON.parse('${subjectScoreDistributionJson}');
        const adjustmentScoreData = JSON.parse('${adjustmentScoreRelationshipJson}');
        const trendData = JSON.parse('${yearlyAdjustmentScoreTrendJson}');
        const monthlyData = JSON.parse('${monthlyAdjustmentFrequencyJson}');
        const violinData = JSON.parse('${subjectScoresViolinJson}');
        const radarData = JSON.parse('${topSchoolsScoreRadarJson}');
        const compositeData = JSON.parse('${yearlySchoolAdjustmentScoreJson}');

        // 初始化所有图表
        initSchoolAdjustmentChart(schoolData);
        initAdjustmentTimeChart(timeData);
        initYearlyApplicantChart(yearlyData);
        initSubjectScoreChart(subjectData);
        initAdjustmentScoreChart(adjustmentScoreData);
        initTrendComparisonChart(trendData);
        initMonthlyHeatmapChart(monthlyData);
        initViolinChart(violinData);
        initRadarChart(radarData);
        initCompositeBarChart(compositeData);
    });

    // 1. 学校调剂数量柱状图
    function initSchoolAdjustmentChart(data) {
        const chart = echarts.init(document.getElementById('schoolAdjustmentChart'));
        chart.setOption({
            xAxis: {data: data.map(item => item.school_name)},
            yAxis: {name: '调剂数量'},
            series: [{data: data.map(item => item.adjustment_count)}]
        });
    }

    // 2. 调剂时间分布折线图
    function initAdjustmentTimeChart(data) {
        const chart = echarts.init(document.getElementById('adjustmentTimeChart'));
        chart.setOption({
            xAxis: {data: data.map(item => new Date(item.adjustment_time).toLocaleDateString())},
            yAxis: {name: '调剂信息数量'},
            series: [{data: data.map(item => item.adjustment_count)}]
        });
    }

    // 3. 不同年份考研人数饼图
    function initYearlyApplicantChart(data) {
        const chart = echarts.init(document.getElementById('yearlyApplicantChart'));
        chart.setOption({
            series: [{
                data: data.map(item => ({value: item.examinee_count, name: `${item.year}年`}))
            }]
        });
    }

    // 4. 各学科总分箱线图
    function initSubjectScoreChart(data) {
        const chart = echarts.init(document.getElementById('subjectScoreChart'));
        chart.setOption({
            xAxis: {data: data.map(item => item.subject_name)},
            yAxis: {min: 250, max: 400},
            series: [{
                type: 'boxplot',
                data: data.map(item => [item.min_score, item.q1_score, item.median_score, item.q3_score, item.max_score])
            }]
        });
    }

    // 5. 调剂学校与分数线关联散点图
    function initAdjustmentScoreChart(data) {
        const chart = echarts.init(document.getElementById('adjustmentScoreChart'));
        chart.setOption({
            xAxis: {name: '分数线', min: 250, max: 380},
            yAxis: {name: '调剂学校数'},
            series: [{
                type: 'scatter',
                data: data.map(item => [item.total_score, item.adjustment_count]),
                symbolSize: data => data[1] / 5
            }]
        });
    }

    // 6. 趋势对比图（双 Y 轴）
    function initTrendComparisonChart(data) {
        const chart = echarts.init(document.getElementById('trendComparisonChart'));
        chart.setOption({
            xAxis: {data: data.map(item => item.year)},
            yAxis: [
                {name: '调剂数量', min: 0, max: 200},
                {name: '分数线', min: 250, max: 380}
            ],
            series: [
                {type: 'bar', yAxisIndex: 0, data: data.map(item => item.adjustment_count)},
                {type: 'line', yAxisIndex: 1, data: data.map(item => item.total_score)}
            ]
        });
    }

    // 7. 每月调剂信息发布频率热力图
    function initMonthlyHeatmapChart(data) {
        const chart = echarts.init(document.getElementById('monthlyHeatmapChart'));
        chart.setOption({
            xAxis: {data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', , '9月', '10月', '11月', '12月']},
            yAxis: {data: data.map(item => item.year)},
            series: [{
                type: 'heatmap',
                data: data.map(item => [item.month - 1, item.year - 2017, item.adjustment_count]) // 假设年份从 2018 开始
            }]
        });
    }

    // 8. 各学科各科目分数小提琴图
    function initViolinChart(data) {
        const chart = echarts.init(document.getElementById('violinChart'));
        chart.setOption({
            xAxis: {data: data.map(item => item.subject_name)},
            yAxis: {name: '分数', min: 0, max: 150},
            series: [
                {name: '政治', data: data.map(item => item.politics_management)},
                {name: '英语', data: data.map(item => item.foreign_language)},
                {name: '专业一', data: data.map(item => item.subject1)},
                {name: '专业二', data: data.map(item => item.subject2)}
            ]
        });
    }

    // 9. 热门学校分数线分布雷达图
    function initRadarChart(data) {
        const chart = echarts.init(document.getElementById('radarChart'));
        chart.setOption({
            radar: {
                indicator: [
                    {name: '政治', max: 100},
                    {name: '英语', max: 100},
                    {name: '专业一', max: 150},
                    {name: '专业二', max: 150},
                    {name: '总分', max: 500}
                ]
            },
            series: [{
                type: 'radar',
                data: data.map(item => ({
                    name: item.school_name,
                    value: [
                        item.politics_management,
                        item.foreign_language,
                        item.subject1,
                        item.subject2,
                        item.total_score
                    ]
                }))
            }]
        });
    }

    // 10. 综合柱状图（多年份对比）
    function initCompositeBarChart(data) {
        const chart = echarts.init(document.getElementById('compositeBarChart'));
        chart.setOption({
            xAxis: {data: data.map(item => item.school_name)},
            yAxis: [
                {name: '调剂数量', min: 0, max: 150},
                {name: '分数线', min: 250, max: 400}
            ],
            series: [
                {
                    name: '2022年调剂数',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data.filter(item => item.year === 2022).map(item => item.adjustment_count)
                },
                {
                    name: '2022年分数线',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: data.filter(item => item.year === 2022).map(item => item.total_score)
                },
                {
                    name: '2023年调剂数',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data.filter(item => item.year === 2023).map(item => item.adjustment_count)
                },
                {
                    name: '2023年分数线',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: data.filter(item => item.year === 2023).map(item => item.total_score)
                }
            ]
        });
    }

    // 响应式适配
    window.addEventListener('resize', () => {
        // 重新计算所有图表尺寸
        [...document.getElementsByClassName('chart-container')].forEach(container => {
            const chart = echarts.getInstanceByDom(container);
            chart && chart.resize();
        });
    });
</script>
</body>
</html>